<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { GetSmsSendLogListParam } from '../types'
import Pagination from '@/components/Pagination/index.vue'
import { RefreshRight, Search } from '@element-plus/icons-vue'
import sendLogList from '../service/sendLogList'
import SendLogDetail from './SendLogDetail.vue'
import HButton from '@/components/common/button/HButton.vue'
import HStatus from '@/components/common/status/HStatus.vue'
import HLink from '@/components/common/link/HLink.vue'

const { totalList, smsSendList, getSmsSendLogListLoading, getSmsSendLogListFn } = sendLogList

// 筛选条件
const filter = ref<GetSmsSendLogListParam>({
  keyword: '',
  limit: 50,
  page: 1,
  smsContent: '',
  type: null,
})

// 分页组件实例
const paginationRef = ref<InstanceType<typeof Pagination> | null>(null)

// 类型选项
const typeOptional = ref([
  { label: '验证类短信', value: '1' },
  { label: '通知类', value: '2' },
  { label: '推广类短信', value: '3' },
])

// 获取日志列表方法
const getSendLogList = async () => {
  if (paginationRef.value) {
    filter.value.limit = paginationRef.value.size
    filter.value.page = paginationRef.value.current
  }
  await getSmsSendLogListFn(filter.value)
}

// 重置事件
const onReset = () => {
  Object.assign(filter.value, {
    keyword: '',
    smsContent: '',
    type: null,
  })
  getSendLogList()
}

onMounted(() => {
  getSendLogList()
})

defineExpose({
  getSendLogList,
})
</script>

<template>
  <div style="display: flex; flex-direction: column; flex: 1">
    <div class="header">
      <div style="display: flex; gap: 5px">
        <el-select style="width: 100px" v-model="filter.type" @change="getSendLogList" placeholder="请选择">
          <el-option v-for="item in typeOptional" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input style="width: 340px" v-model="filter.keyword" placeholder="短信模版名称/发送者名称/接收者手机号/接收者名称"
          @clear="getSendLogList" @keyup.enter="getSendLogList" />
        <el-input style="width: 120px" v-model="filter.smsContent" placeholder="发送的短信内容" />
        <!-- 按钮组 -->
        <HButton type="primary" @click="getSendLogList">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
        <HButton @click="onReset">
          <el-icon>
            <RefreshRight />
          </el-icon>
          重置
        </HButton>
      </div>
    </div>
    <div class="table">
      <el-table :data="smsSendList" height="100%" style="position: absolute" border resizable stripe
        v-loading="getSmsSendLogListLoading">
        <!--序号-->
        <el-table-column label="序号" show-overflow-tooltip type="index" width="50" />

        <!--模版名称-->
        <el-table-column label="模版名称" prop="name" show-overflow-tooltip width="180" />

        <!--短信类型-->
        <el-table-column label="短信类型" prop="type" show-overflow-tooltip width="86">
          <template #default="scope">
            <span v-if="scope.row.type === 1">验证类短信</span>
            <span v-if="scope.row.type === 2">通知类</span>
            <span v-else>推广类短信</span>
          </template>
        </el-table-column>

        <!--发送者名称-->
        <el-table-column label="发送者名称" prop="sendUser" show-overflow-tooltip width="140" />

        <!--短信内容-->
        <el-table-column label="短信内容" prop="smsContent" show-overflow-tooltip min-width="200" />

        <!--接收者手机号-->
        <el-table-column label="接收者手机号" prop="receiveUserPhone" show-overflow-tooltip width="104" />

        <!--接收者名称-->
        <el-table-column label="接收者名称" prop="receiveUsername" show-overflow-tooltip width="140" />

        <!--发送结果-->
        <el-table-column label="发送结果" prop="success" show-overflow-tooltip width="94">
          <template #default="scope">
            <HStatus v-if="scope.row.success" type="success">发送成功</HStatus>
            <HStatus v-else type="error">发送失败</HStatus>
          </template>
        </el-table-column>

        <!--发送时间-->
        <el-table-column label="发送时间" prop="createTime" show-overflow-tooltip width="128" />

        <!--操作-->
        <el-table-column fixed="right" label="操作" prop="operate" show-overflow-tooltip width="60">
          <template #default="scope">
            <div class="btns">
              <SendLogDetail :sms-id="scope.row.id">
                <HLink>详细</HLink>
              </SendLogDetail>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <Pagination :list_total="Number(totalList)" ref="paginationRef" @size-change="getSendLogList"
        @current-change="getSendLogList" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: flex-end;
}

.footer {
  display: flex;
  justify-content: flex-end;
}

.el-button+.el-button {
  margin: 0;
}
</style>
